<script setup>
import {reactive, ref} from "vue";
import {Calendar, Search} from "@element-plus/icons-vue";

const data = reactive({
  input: null,
  desc: null,
  value: null,
  options: ['Java', 'C', 'PHP', 'C++'],
  radios: null,
  url: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  srcList: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'],
  picture: ['http://47.121.193.211:9000/myblog/c39136148e5d4d8382f1aec02b23960c.png','http://47.121.193.211:9000/myblog/304966e979394016b319083b4a173eb1.png','http://47.121.193.211:9000/myblog/2c5ff7b73fb54aebbe589b2a62a27f03.png','http://47.121.193.211:9000/myblog/b654f0f8d09743158a025be1da19b513.png'],
  date: null,
  currentPage:1,
  pageSize: 5,

})
const dialogVisible = ref(false)
</script>

<template>
  <div>
    <div style="margin-bottom: 20px">
      <h1>Input 输入框</h1>
      <!--设置disabled禁用,设置readonly只读-->
      <el-input
          v-model="data.input"
          style="width:240px"
          placeholder="请输入内容"
          :prefix-icon="Search"
          :suffix-icon="Calendar"
          clearable></el-input>
      {{data.input}}
      <el-input v-model="data.desc"
                type="textarea"
                style="width:340px"
                placeholder="请输入描述"></el-input>
      {{data.desc}}
    </div>

    <div style="margin-bottom: 20px">
      <h1>Select 选择器</h1>
      <el-select
          v-model="data.value"
          placeholder="单选下拉框"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>

      <el-select
          v-model="data.value"
          multiple
          placeholder="多选下拉框"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
    </div>

    <div style="margin-bottom: 20px">
      <h1>Radio 单选框</h1>
      <el-radio-group v-model="data.radio">
        <el-radio value="1" size="large">Option 1</el-radio>
        <el-radio value="2" size="large">Option 2</el-radio>
        <el-radio value="3" size="large">Option 3</el-radio>
      </el-radio-group>
    </div>

    <div style="margin-bottom: 20px">
      <h1>Image 图片</h1>
      <!--el-image不能直接使用本地路径渲染-->
      <el-image
          style="width: 100px; height: 100px"
          :src="data.url"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="data.srcList"
          :initial-index="4"
          fit="cover"
      />
    </div>

    <div style="margin-bottom: 20px">
      <h1>Carousel 走马灯(轮播图)</h1>
      <div class="block text-center">
        <span class="demonstration">
          Switch when indicator is hovered (default)
        </span>
        <el-carousel height="400px" style="width: 700px">
          <el-carousel-item v-for="item in data.picture" :key="item">
            <el-image
                style="width: 100%; height: 400px"
                :src="item"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[item]"
                :initial-index="4"
                fit="cover"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div style="margin-bottom: 20px">
      <h1>DatePicker 日期选择器 </h1>
      <div class="block">
        <span class="demonstration">Default</span>
        <el-date-picker
            v-model="data.date"
            type="date"
            placeholder="Pick a day"
            :size="size"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
        {{data.date}}
      </div>
    </div>

    <div style="margin-bottom: 20px">
      <h1>Pagination 分页</h1>
      <el-pagination
          v-model:current-page="data.currentPage"
          v-model:page-size="data.pageSize"
          :total="400"
          :page-sizes="[5, 10, 20, 40]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
      />
    </div>

    <el-button type="success" @click="dialogVisible = true">查看介绍</el-button>
    <el-dialog
        v-model="dialogVisible"
        title="课程介绍"
        width="600"
        append-to-body="true">
      <span>你好你好你好你好你好你好你好你好你好你好你好你好你好</span>
    </el-dialog>
  </div>
</template>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>